<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <el-form-item label="商品分类" prop="categoryIds">
                    <el-cascader v-model="searchForm.categoryId" :options="cateGoryList" :clearable="true" :props="{
                        label: 'name',
                        value: 'category_id',
                        checkStrictly: true
                    }" ref="cascader" placeholder="请选择上级分类"></el-cascader>
                </el-form-item>
                <!-- <el-form-item label="商品搜索" label-for="keyword">
                    <el-input v-model="searchForm.keyword" placeholder="请输入内容" clearable>
                        <el-select v-model="searchForm.search_type" slot="prepend" style="width: 100px">
                            <el-option value="0" label="全部"></el-option>
                            <el-option value="2" label="商品名称"></el-option>
                            <el-option value="3" label="商品编码"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item> -->
                <el-form-item label="商品名称" label-for="goods_name">
                    <el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="toSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '10px 20px 20px' }">
            <el-tabs v-model="searchForm.listType" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane label="出售中" name="on_sale"></el-tab-pane>
                <el-tab-pane label="已下架" name="off_sale"></el-tab-pane>
                <el-tab-pane label="已售罄" name="sold_out"></el-tab-pane>
            </el-tabs>
            <el-table size="small" header-cell-class-name="table_header_cell" :data="list" v-loading="isLoading"
                ref="goodsTable">
                <!-- <el-table-column prop="goods_id" label="商品ID" width="80">
                </el-table-column> -->
                <el-table-column prop="xuhao" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="name" label="商品图片" width="100">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.goods_image" fit="contain" class="list-img">
                            <div slot="error" class="image-slot">
                                <p>暂无图片</p>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" min-width="300">
                </el-table-column>
                <el-table-column prop="goods_price_min" label="平台价">
                </el-table-column>
                <el-table-column prop="supply_price" label="商品报价">
                </el-table-column>
                <el-table-column prop="stock_total" label="库存">
                </el-table-column>
                <el-table-column prop="producer" label="产地">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.producer" type="success" size="mini">
                            {{ scope.row.producer }}</el-tag>
                        <el-tag v-else type="info" size="mini">暂无</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序"> </el-table-column>
                <el-table-column prop="producer" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-button class="up-btn" size="mini" :type="scope.row.status == 10 ? 'success' : 'warning'"
                            plain>{{ scope.row.status
                                == 10 ? '上架' :
                                '下架'
                            }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="160px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toQuotation(scope.row.goods_id)">报价</el-button>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <pagination v-if="searchForm.total" :total="searchForm.total" :page.sync="searchForm.page"
                :limit.sync="searchForm.limits" @pagination="getGoodsList" />
        </el-card>
    </div>
</template>

<script>
import { goodsList, setGoodsStatus, cateGoryList } from "@/api/goods";
export default {
    components: {},
    data() {
        return {
            searchForm: {
                page: 1,
                limits: 15,
                total: 0,
                listType: 'all',
                goods_type: 10,
                // search_type: '0',
                // keyword: '',
                goods_name: '',
                categoryId: '',
            },
            isLoading: false,
            list: [],
            cateGoryList: []
        };
    },

    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
        this.isLoading = true;
        this.getGoodsList();
        this.getCateGoryList()
    },
    mounted() {
        // this.goodsCascader()

    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        handleClick(tab) {
            this.searchForm.listType = tab.name;
            this.reload()
        },
        toSearch() {
            if (this.searchForm.categoryId.length > 0) {
                const category_id = this.searchForm.categoryId[this.searchForm.categoryId.length - 1];
                this.searchForm.categoryId = category_id;
            }
            this.reload()
        },
        reload() {
            this.isLoading = true;
            this.list = [];
            this.searchForm.page = 1;
            this.getGoodsList()
        },
        getCateGoryList() {
            cateGoryList({
                status: "-1",
                company_id: this.searchForm.company_id,
            }).then((res) => {
                this.isLoading = false;
                if (res.code == 0) {
                    // res.data.forEach(v => {
                    //     if (!v.children) {//一级下面没有子元素
                    //         v.disabled = true;
                    //     } else {
                    //         v.children.forEach(item => {
                    //             if (!item.children) {
                    //                 item.disabled = true;
                    //             }
                    //         })
                    //     }
                    // })
                    this.cateGoryList = res.data;
                }
            });
        },
        //获取商品列表
        getGoodsList() {
            goodsList(this.searchForm).then((res) => {
                this.isLoading = false;
                if (res.code == 0) {
                    this.list = res.data.data;
                    console.log('list', this.list)
                    this.searchForm.total = res.data.total;
                }
            });
        },
        //去报价
        toQuotation(id) {
            this.$router.push(`/goods/add_quotation/${id}`);
        },
        //查看报价
        toQuotationInfo(id) {
            this.$router.push(`/goods/edit_quotation/${id}`);
        },
    },
};
</script>

<style scoped>
/deep/ .image-slot {
    color: #c0c4cc;
    background: #f5f7fa !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-btn {
    padding: 4px 6px;
}

.label-icon {
    font-size: 12px;
}

.ml {
    margin-left: 15px;
}
</style>
